<template>
  <div>
    <!-- 发起事务 -->
    <el-form size="small" :inline="true">
      <el-form-item label="流程分类">
        <el-select placeholder="请选择 流程分类" style="width:200px;" clearable>
          <el-option label="0" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流程名称">
        <el-input placeholder="请输入 流程名称" style="width:200px;"></el-input>
      </el-form-item>
      <el-button size="small" class="search_button" type="primary" icon="el-icon-search">查询</el-button>
      <el-button size="small" plain class="reset_button" type="info" icon="el-icon-refresh">重置</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;margin-top:10px" border size="medium">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="" label="#" align="center" width="55"></el-table-column>
      <el-table-column prop="tenantId" label="租户编号" align="center"></el-table-column>
      <el-table-column prop="category" label="流程分类" align="center"></el-table-column>
      <el-table-column prop="key" label="流程标识" align="center"></el-table-column>
      <el-table-column prop="name" label="流程名称" align="center"></el-table-column>
      <el-table-column prop="version" label="流程版本" align="center"></el-table-column>
      <el-table-column prop="suspensionState" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.suspensionState == 0">挂起</span>
          <span v-if="scope.row.suspensionState == 1">激活</span>
        </template>
      </el-table-column>
      <el-table-column prop="deploymentTime" label="部署时间" align="center" width="170"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center" width="170">
        <template slot-scope="scope">
          <el-button size="mini" type="text" plain icon="el-icon-video-play
                 " @click="showStart(scope.row)">发起</el-button>
          <!-- <el-button size="mini" type="text" plain icon="el-icon-video-play
                 " @click="claimTask(scope.row)">测试签收</el-button>
          <el-button size="mini" type="text" plain icon="el-icon-video-play
                 " @click="completeTask(scope.row)">测试完成</el-button> -->
          <el-button size="mini" type="text" plain icon="el-icon-view">流程图</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="宿舍调整基础信息" :visible.sync="dialogChange" width="50%">
      <el-form :model="formChange" label-width="80px">
        <el-form-item label="学生">
          <el-input v-model="formChange.id" placeholder="请输入 学生"></el-input>
        </el-form-item>
        <el-form-item label="新房间号">
          <el-input v-model="formChange.newBed" placeholder="请输入 新房间号"></el-input>
        </el-form-item>
        <el-form-item label="调整原因">
          <el-input type="textarea" v-model="formChange.reason" placeholder="请输入 调整原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChange = false">取 消</el-button>
        <el-button type="primary" @click="startChangeProcess">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>

  </div>
</template>

<script>
import {
  startList, //获取列表
} from '_api/MyBusiness/index.js'
import {
  startChangeProcess, //开始宿舍调整流程
  claimTask,  //签收事务
  completeTask,  //完成事务
} from '_api/process/index.js'
export default {
  data() {
    return {
      dialogChange: false,
      // 查询参数
      queryParams: {
        category: "",
        current: 1,
        field: "",
        mode: "",
        order: "",
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      formChange: {
        id: "",
        newBed: "",
        reason: ""
      },
      formFinish: {
        assignee: "",
        assigneeName: "",
        beginDate: "",
        businessId: "",
        businessTable: "",
        category: "",
        categoryName: "",
        claimTime: "",
        comment: "",
        createTime: "",
        endDate: "",
        endTime: "",
        executionId: "",
        flag: "",
        historyActivityDurationTime: "",
        historyActivityId: "",
        historyActivityName: "",
        historyProcessInstanceId: "",
        historyTaskEndTime: "",
        pass: true,
        processDefinitionDesc: "",
        processDefinitionDiagramResName: "",
        processDefinitionId: "",
        processDefinitionKey: "",
        processDefinitionName: "",
        processDefinitionResName: "",
        processDefinitionVersion: 0,
        processInstanceId: "",
        processIsFinished: "",
        status: "",
        taskDefinitionKey: "",
        taskId: "",
        taskName: "",
        variables: {}
      }
    }
  },
  methods: {
    showStart(e) {
      this.dialogChange = true
    },
    // 开始宿舍调整流程
    startChangeProcess() {
      startChangeProcess(this.formChange).then(res => {

      })
    },
    // 签收事务
    claimTask(e) {
      claimTask({ taskId: e.id }).then(res => {

      })
    },
    // 完成事务
    completeTask(e) {
      this.formFinish.taskId = e.id
      completeTask(this.formFinish).then(res => {

      })
    },
    // 转换时间
    changeTime(time) {
      var date = new Date(time);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return (Y + M + D + h + m + s);
    },
    handleCurrentChange(e) {
      //当前页
      this.queryParams.current = e
      this.startList()
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e
      this.startList()
    },
    startList() {
      startList(this.queryParams).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.tableData.forEach(item => {
            item.deploymentTime = this.changeTime(item.deploymentTime)
          })
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    }
  },
  created() {
    this.startList()
  },
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
